module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/dist/";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 53);
/******/ })
/************************************************************************/
/******/ ({

/***/ 1:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */

// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.

function normalizeComponent(
  scriptExports,
  render,
  staticRenderFns,
  functionalTemplate,
  injectStyles,
  scopeId,
  moduleIdentifier /* server only */,
  shadowMode /* vue-cli only */
) {
  // Vue.extend constructor export interop
  var options =
    typeof scriptExports === 'function' ? scriptExports.options : scriptExports

  // render functions
  if (render) {
    options.render = render
    options.staticRenderFns = staticRenderFns
    options._compiled = true
  }

  // functional template
  if (functionalTemplate) {
    options.functional = true
  }

  // scopedId
  if (scopeId) {
    options._scopeId = 'data-v-' + scopeId
  }

  var hook
  if (moduleIdentifier) {
    // server build
    hook = function (context) {
      // 2.3 injection
      context =
        context || // cached call
        (this.$vnode && this.$vnode.ssrContext) || // stateful
        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__
      }
      // inject component styles
      if (injectStyles) {
        injectStyles.call(this, context)
      }
      // register component module identifier for async chunk inferrence
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier)
      }
    }
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook
  } else if (injectStyles) {
    hook = shadowMode
      ? function () {
          injectStyles.call(
            this,
            (options.functional ? this.parent : this).$root.$options.shadowRoot
          )
        }
      : injectStyles
  }

  if (hook) {
    if (options.functional) {
      // for template-only hot-reload because in that case the render fn doesn't
      // go through the normalizer
      options._injectStyles = hook
      // register for functional component in vue file
      var originalRender = options.render
      options.render = function renderWithStyleInjection(h, context) {
        hook.call(context)
        return originalRender(h, context)
      }
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate
      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
    }
  }

  return {
    exports: scriptExports,
    options: options
  }
}


/***/ }),

/***/ 10:
/***/ (function(module, exports) {

module.exports = require("ulearning-ui/lib/utils/popup");

/***/ }),

/***/ 23:
/***/ (function(module, exports) {

module.exports = require("fabric");

/***/ }),

/***/ 4:
/***/ (function(module, exports) {

module.exports = require("vue");

/***/ }),

/***/ 53:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: external "vue"
var external_vue_ = __webpack_require__(4);
var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);

// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/vue-loader/lib??vue-loader-options!./packages/fabric-paint/src/paint.vue?vue&type=template&id=5a7efb1e&
var render = function render() {
  var _vm = this,
    _c = _vm._self._c
  return _c("transition", { attrs: { name: "viewer-fade" } }, [
    _c(
      "div",
      {
        directives: [
          {
            name: "show",
            rawName: "v-show",
            value: _vm.isShow,
            expression: "isShow",
          },
        ],
        key: "fabricPaint",
        ref: "ul-image-viewer__wrapper",
        staticClass: "ul-image-viewer__wrapper",
        style: { "z-index": _vm.viewerZIndex },
        attrs: { tabindex: "-1" },
      },
      [
        _c("div", { staticClass: "ul-image-viewer__mask" }),
        _c("div", { staticClass: "ul-image-viewer__paint-top" }, [
          _c("div", { staticClass: "ul-image-viewer__paint-top-left" }, [
            _c("h4", [_vm._v(_vm._s(_vm.title))]),
          ]),
          _c("div", { staticClass: "number" }, [
            _vm._v(_vm._s(_vm.index + 1) + "/" + _vm._s(_vm.imgList.length)),
          ]),
          _c("div", { staticClass: "ul-image-viewer__paint-top-right" }, [
            _vm.mode == "view"
              ? _c("i", {
                  staticClass: "iconfont icon-guanbi1 close",
                  on: { click: _vm.hide },
                })
              : _vm._e(),
          ]),
        ]),
        _vm.mode == "edit"
          ? _c("div", { staticClass: "ul-image-viewer__paint-actions" }, [
              _vm.isShowSubActions
                ? _c(
                    "div",
                    {
                      staticClass: "ul-image-viewer__paint-sub-actions__inner",
                    },
                    [
                      _c(
                        "div",
                        {
                          staticClass: "width width-small",
                          class: { active: _vm.lineWidth == 4 },
                          on: {
                            click: function ($event) {
                              return _vm.setLineWidth(1)
                            },
                          },
                        },
                        [_c("div", { staticClass: "dot" })]
                      ),
                      _c(
                        "div",
                        {
                          staticClass: "width width-middle",
                          class: { active: _vm.lineWidth == 8 },
                          on: {
                            click: function ($event) {
                              return _vm.setLineWidth(2)
                            },
                          },
                        },
                        [_c("div", { staticClass: "dot" })]
                      ),
                      _c(
                        "div",
                        {
                          staticClass: "width width-large",
                          class: { active: _vm.lineWidth == 12 },
                          on: {
                            click: function ($event) {
                              return _vm.setLineWidth(3)
                            },
                          },
                        },
                        [_c("div", { staticClass: "dot" })]
                      ),
                      _c("div", { staticClass: "split" }),
                      _c("div", {
                        staticClass: "color color-red",
                        class: { active: _vm.strokeColor == "#f60000" },
                        on: {
                          click: function ($event) {
                            return _vm.setStokeColor("#f60000")
                          },
                        },
                      }),
                      _c("div", {
                        staticClass: "color color-yellow",
                        class: { active: _vm.strokeColor == "#f7b13d" },
                        on: {
                          click: function ($event) {
                            return _vm.setStokeColor("#f7b13d")
                          },
                        },
                      }),
                      _c("div", {
                        staticClass: "color color-blue",
                        class: { active: _vm.strokeColor == "#529fff" },
                        on: {
                          click: function ($event) {
                            return _vm.setStokeColor("#529fff")
                          },
                        },
                      }),
                      _c("div", {
                        staticClass: "color color-green",
                        class: { active: _vm.strokeColor == "#69d184" },
                        on: {
                          click: function ($event) {
                            return _vm.setStokeColor("#69d184")
                          },
                        },
                      }),
                      _c("div", {
                        staticClass: "color color-black",
                        class: { active: _vm.strokeColor == "#000" },
                        on: {
                          click: function ($event) {
                            return _vm.setStokeColor("#000")
                          },
                        },
                      }),
                      _c("div", {
                        staticClass: "color color-gray",
                        class: { active: _vm.strokeColor == "#666" },
                        on: {
                          click: function ($event) {
                            return _vm.setStokeColor("#666")
                          },
                        },
                      }),
                      _c("div", {
                        staticClass: "color color-white",
                        class: { active: _vm.strokeColor == "#fff" },
                        on: {
                          click: function ($event) {
                            return _vm.setStokeColor("#fff")
                          },
                        },
                      }),
                    ]
                  )
                : _vm._e(),
              _c(
                "div",
                { staticClass: "ul-image-viewer__paint-actions__inner" },
                [
                  _c(
                    "ul-tooltip",
                    { attrs: { content: "文字", placement: "bottom" } },
                    [
                      _c(
                        "button",
                        {
                          class: { active: _vm.selectTool == "text" },
                          attrs: { type: "button", title: "文字" },
                          on: {
                            click: function ($event) {
                              return _vm.tapToolBtn("text")
                            },
                          },
                        },
                        [_c("i", { staticClass: "iconfont icon-pizhu_wenzi" })]
                      ),
                    ]
                  ),
                  _c(
                    "ul-tooltip",
                    { attrs: { content: "方框", placement: "bottom" } },
                    [
                      _c(
                        "button",
                        {
                          class: { active: _vm.selectTool == "rect" },
                          attrs: { type: "button" },
                          on: {
                            click: function ($event) {
                              return _vm.tapToolBtn("rect")
                            },
                          },
                        },
                        [_c("i", { staticClass: "iconfont icon-pizhu_juxing" })]
                      ),
                    ]
                  ),
                  _c(
                    "ul-tooltip",
                    { attrs: { content: "椭圆", placement: "top" } },
                    [
                      _c(
                        "button",
                        {
                          class: { active: _vm.selectTool == "ellipse" },
                          attrs: { type: "button" },
                          on: {
                            click: function ($event) {
                              return _vm.tapToolBtn("ellipse")
                            },
                          },
                        },
                        [
                          _c("i", {
                            staticClass: "iconfont icon-pizhu_tuoyuan",
                          }),
                        ]
                      ),
                    ]
                  ),
                  _c(
                    "ul-tooltip",
                    { attrs: { content: "直线", placement: "top" } },
                    [
                      _c(
                        "button",
                        {
                          class: { active: _vm.selectTool == "line" },
                          attrs: { type: "button" },
                          on: {
                            click: function ($event) {
                              return _vm.tapToolBtn("line")
                            },
                          },
                        },
                        [
                          _c("i", {
                            staticClass: "iconfont icon-pizhu_zhixian",
                          }),
                        ]
                      ),
                    ]
                  ),
                  _c(
                    "ul-tooltip",
                    { attrs: { content: "画笔", placement: "top" } },
                    [
                      _c(
                        "button",
                        {
                          class: { active: _vm.selectTool == "brush" },
                          attrs: { type: "button" },
                          on: {
                            click: function ($event) {
                              return _vm.tapToolBtn("brush")
                            },
                          },
                        },
                        [_c("i", { staticClass: "iconfont icon-pizhu_huabi" })]
                      ),
                    ]
                  ),
                  _c(
                    "ul-tooltip",
                    { attrs: { content: "撤销", placement: "top" } },
                    [
                      _c(
                        "button",
                        {
                          attrs: {
                            type: "button",
                            disabled: _vm.stateIdx == 0,
                          },
                          on: {
                            click: function ($event) {
                              return _vm.exeCommand("undo")
                            },
                          },
                        },
                        [
                          _c("i", {
                            staticClass: "iconfont icon-pizhu_chexiao",
                          }),
                        ]
                      ),
                    ]
                  ),
                  _c(
                    "ul-tooltip",
                    { attrs: { content: "清除", placement: "top" } },
                    [
                      _c(
                        "button",
                        {
                          attrs: { type: "button" },
                          on: {
                            click: function ($event) {
                              return _vm.exeCommand("clear")
                            },
                          },
                        },
                        [_c("i", { staticClass: "iconfont icon-paint-clean1" })]
                      ),
                    ]
                  ),
                  _c("div", { staticClass: "split" }),
                  _c(
                    "button",
                    {
                      staticClass: "btn-text-icon",
                      attrs: { type: "button" },
                      on: {
                        click: function ($event) {
                          return _vm.exeCommand("exit")
                        },
                      },
                    },
                    [
                      _c("i", { staticClass: "iconfont icon-guanbi1" }),
                      _c("span", { staticClass: "text" }, [_vm._v("退出")]),
                    ]
                  ),
                  _c(
                    "button",
                    {
                      staticClass: "btn-text-icon",
                      attrs: { type: "button" },
                      on: {
                        click: function ($event) {
                          return _vm.exeCommand("save")
                        },
                      },
                    },
                    [
                      _c("i", { staticClass: "iconfont icon-baocun" }),
                      _c("span", { staticClass: "text" }, [_vm._v("保存")]),
                    ]
                  ),
                ],
                1
              ),
            ])
          : _vm._e(),
        _vm.mode == "view" && !_vm.isOnlyView
          ? _c(
              "div",
              { staticClass: "ul-image-viewer__view-actions" },
              [
                !_vm.isOnlyView
                  ? _c(
                      "ul-button",
                      {
                        attrs: { type: "primary", icon: "icon-toolbar-pen" },
                        on: { click: _vm.toEditMode },
                      },
                      [_vm._v("添加批注")]
                    )
                  : _vm._e(),
                !_vm.isOnlyView && _vm.showClearBtn
                  ? _c(
                      "ul-button",
                      {
                        attrs: { type: "primary", icon: "icon-qingchu" },
                        on: { click: _vm.onClearMarks },
                      },
                      [_vm._v("删除批注")]
                    )
                  : _vm._e(),
                _c(
                  "ul-button",
                  {
                    attrs: { hollow: "", icon: "icon-xiazai" },
                    on: { click: _vm.onDownload },
                  },
                  [_vm._v("下载文档")]
                ),
              ],
              1
            )
          : _vm._e(),
        _c(
          "div",
          { staticClass: "ul-image-paint" },
          [
            _c(
              "ul-scrollbar",
              {
                ref: "scrollbar",
                attrs: {
                  isScrollBarAlwaysShow: _vm.isScrollBarAlwaysShow,
                  tag: "div",
                  "wrap-class": "scrollbar-wrapper",
                  wrapStyle: "flex:1;height:0;overflow-x:auto;",
                },
              },
              [
                _c("div", {
                  directives: [
                    {
                      name: "show",
                      rawName: "v-show",
                      value: _vm.mode == "edit",
                      expression: "mode == 'edit'",
                    },
                  ],
                  ref: "canvasWrapper",
                  staticClass: "ul-image-paint__inner",
                  style: {
                    "background-image":
                      "url(" + _vm.currentImage.background + ")",
                  },
                }),
                _vm.mode !== "edit"
                  ? _c("div", { staticClass: "ul-image-paint__img-wrapper" }, [
                      _vm.currentImage.foreground
                        ? _c("img", {
                            style: {
                              "background-image":
                                "url(" + _vm.currentImage.background + ")",
                            },
                            attrs: {
                              src: _vm.currentImage.foreground,
                              alt: "",
                            },
                          })
                        : _c("img", {
                            attrs: {
                              src: _vm.currentImage.background,
                              alt: "",
                            },
                          }),
                    ])
                  : _vm._e(),
              ]
            ),
            [
              _c(
                "span",
                {
                  staticClass: "ul-image-viewer__btn ul-image-paint__prev",
                  class: { "is-disabled": _vm.index === 0 },
                  on: { click: _vm.prev },
                },
                [_c("i", { staticClass: "iconfont icon-zuoye" })]
              ),
              _c(
                "span",
                {
                  staticClass: "ul-image-viewer__btn ul-image-paint__next",
                  class: {
                    "is-disabled": _vm.index === _vm.imgList.length - 1,
                  },
                  on: { click: _vm.next },
                },
                [_c("i", { staticClass: "iconfont icon-youye" })]
              ),
            ],
          ],
          2
        ),
      ]
    ),
  ])
}
var staticRenderFns = []
render._withStripped = true


// CONCATENATED MODULE: ./packages/fabric-paint/src/paint.vue?vue&type=template&id=5a7efb1e&

// EXTERNAL MODULE: external "ulearning-ui/lib/utils/popup"
var popup_ = __webpack_require__(10);

// EXTERNAL MODULE: external "fabric"
var external_fabric_ = __webpack_require__(23);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/fabric-paint/src/paint.vue?vue&type=script&lang=js&



/* harmony default export */ var paintvue_type_script_lang_js_ = ({
  name: 'Paint',
  props: {
    imgList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    title: {
      type: String,
      default: ''
    },
    isScrollBarAlwaysShow: {
      type: Boolean,
      default: false
    },
    // 批注组件是否只能查看 不能编辑 用于预览批注后的文档
    isOnlyView: {
      type: Boolean,
      default: false
    },
    onDownload: {
      type: Function
    },
    onSave: {
      type: Function
    },
    onClearMarks: {
      type: Function
    }
  },
  computed: {
    viewerZIndex: function viewerZIndex() {
      var nextZIndex = popup_["PopupManager"].nextZIndex();
      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
    },
    currentImage: function currentImage() {
      return this.imgList[this.index];
    },
    showClearBtn: function showClearBtn() {
      return this.imgList.some(function (item) {
        return item.foreground;
      });
    }
  },
  data: function data() {
    return {
      isShow: false,
      index: 0,
      mode: 'view', // view edit 查看和批注两种模式
      canvas: null, //批注canvas对象 用完销毁
      strokeColor: "#f60000", // 线框色
      showStrokeColorPicker: false, // 是否显示 线框色选择器

      fillColor: "rgba(0,0,0,0)", // 填充色

      lineWidth: 4, // 线条大小 （线条 and 线框）
      fontSize: 16, // 字体大小

      selectTool: "", // 当前用户选择的绘图工具 画笔：brush 直线：line 矩形：rect 椭圆 ellipse 文本 text

      mouseFrom: {}, // 鼠标绘制起点
      mouseTo: {}, // 鼠标绘制重点

      drawingObject: null, // 保存鼠标未松开时用户绘制的临时图像

      textObject: null, // 保存用户创建的文本对象

      isDrawing: false, // 当前是否正在绘制图形（画笔，文本模式除外）
      stateArr: [], // 保存画布的操作记录
      stateIdx: 0, // 当前操作步数
      isRedoing: false, // 当前是否在执行撤销或重做操作
      isShowSubActions: false, // 是否显示颜色，大小子操作
      hasContentUnsaved: false, // 是否有未保存的内容
      isObjectSelected: false // 是否有对象被选中
    };
  },
  mounted: function mounted() {
    this.renderImage();
    window.fabric = external_fabric_["fabric"];
    window.test = this;
  },

  methods: {
    renderImage: function renderImage() {
      var _this = this;

      if (this.mode == 'edit') {
        if (!this.currentImage.width) {
          this.getImageInfo(this.currentImage, function () {
            _this.initPaint();
          });
        } else {
          this.initPaint();
        }
      }
    },

    // 初始化画板
    initPaint: function initPaint() {
      try {
        // 初始化 画布
        this.initCanvas();
      } catch (error) {
        console.log(error);
      }
    },

    // 初始化画布
    initCanvas: function initCanvas() {
      var _this2 = this;

      this.canvas = null;
      this.$refs.canvasWrapper.innerHTML = '<canvas ref="canvas" id="fabric" width="' + this.currentImage.width + '"  height="' + this.currentImage.height + '"></canvas>';
      // 初始化 fabric canvas对象
      var options = {
        selection: false, // 禁止用户进行组选择
        hoverCursor: "default"
      };
      this.isShowSubActions = false;
      if (this.currentImage.foreground) {
        // 直接写入线上图片地址，会导致跨域问题，所以需要先下载图片，然后转成blob对象，再转成url
        fetch(this.currentImage.foreground).then(function (result) {
          return result.blob();
        }).then(function (blob) {
          var url = URL.createObjectURL(blob);
          external_fabric_["fabric"].Image.fromURL(url, function (Image) {
            options.backgroundImage = Image;
            _this2.canvas = new external_fabric_["fabric"].Canvas("fabric", options);
            // 重置已选择的画笔工具
            _this2.selectTool = '';
            _this2.stateIdx = 0;
            _this2.stateArr = [];
            _this2.stateArr.push(JSON.stringify(_this2.canvas));
            _this2.initCanvasEvent();
          });
        });
      } else {
        this.canvas = new external_fabric_["fabric"].Canvas("fabric", options);
        // 重置已选择的画笔工具
        this.selectTool = '';
        this.stateIdx = 0;
        this.stateArr = [];
        // 记录画布原始状态  有背景图时会触发render时间进行push，没有背景图时需要手动push
        this.stateArr.push(JSON.stringify(this.canvas));
        // 初始化 画布 事件
        this.initCanvasEvent();
      }
    },

    // 初始化画布事件
    initCanvasEvent: function initCanvasEvent() {
      var _this3 = this;

      // 操作类型集合
      var toolTypes = ["line", "rect", "ellipse", "text", "arrow", "brush"];

      // 监听鼠标按下事件
      this.canvas.on("mouse:down", function (options) {
        if (_this3.isObjectSelected) {
          return;
        }
        if (_this3.selectTool != 'text' && _this3.textObject) {
          // 如果当前存在文本对象，并且不是进行添加文字操作 则 退出编辑模式，并删除临时的文本对象
          // 将当前文本对象退出编辑模式
          _this3.textObject.exitEditing();
          _this3.textObject.set("backgroundColor", "rgba(0,0,0,0)");
          if (_this3.textObject.text == "") {
            _this3.canvas.remove(_this3.textObject);
          }
          _this3.canvas.renderAll();
          _this3.textObject = null;
        }
        // 判断当前是否选择了集合中的操作
        if (toolTypes.indexOf(_this3.selectTool) != -1) {
          var pointer = _this3.canvas.getPointer(options.e);
          _this3.mouseFrom.x = pointer.x;
          _this3.mouseFrom.y = pointer.y;
          // 判断当前选择的工具是否为文本
          if (_this3.selectTool == "text") {
            // 文本工具初始化
            _this3.initText();
          } else {
            // 设置当前正在进行绘图 或 移动操作
            _this3.isDrawing = true;
          }
        }
      });
      // 监听鼠标移动事件
      this.canvas.on("mouse:move", function (options) {
        // 如果当前正在进行绘图或移动相关操作
        if (_this3.isDrawing && !_this3.isObjectSelected) {
          // 记录当前鼠标移动终点坐标 (减去画布在 x y轴的偏移，因为画布左上角坐标不一定在浏览器的窗口左上角)
          var pointer = _this3.canvas.getPointer(options.e);
          _this3.mouseTo.x = Math.max(pointer.x, 0);
          _this3.mouseTo.y = Math.max(pointer.y, 0);;
          // console.log(this.mouseTo.x, this.mouseTo.y)
          switch (_this3.selectTool) {
            case "line":
              // 当前绘制直线，初始化直线绘制
              _this3.initLine();
              break;
            case "rect":
              // 初始化 矩形绘制
              _this3.initRect();
              break;
            case "ellipse":
              // 初始化 绘制圆形
              _this3.initEllipse();
              break;
            case "arrow":
              // 初始化 箭头绘制
              _this3.initArrow();
          }
        }
      });
      // 监听鼠标松开事件
      this.canvas.on("mouse:up", function () {
        // 如果当前正在进行绘图或移动相关操作
        if (_this3.isDrawing && !_this3.isObjectSelected) {
          // 清空鼠标移动时保存的临时绘图对象
          _this3.drawingObject = null;
          // 重置正在绘制图形标志
          _this3.isDrawing = false;
          // 清空鼠标保存记录
          console.log('mouse:up');
          _this3.resetMove();
        }
      });
      this.canvas.on("selection:created", function (e) {
        _this3.isObjectSelected = true;
      });
      this.canvas.on("selection:cleared", function (e) {
        _this3.isObjectSelected = false;
      });
      // 监听画布渲染完成
      // this.canvas.on("after:render", (a,b,c,d) => {
      //   // console.log('after:render',a,b,c,d)
      //   // if (!this.isRedoing) {
      //   //   // 当前不是进行撤销或重做操作
      //   //   // 在绘画时会频繁触发该回调，所以间隔1s记录当前状态
      //   //   if (this.recordTimer) {
      //   //     clearTimeout(this.recordTimer)
      //   //     this.recordTimer = null
      //   //   }
      //   //   this.recordTimer = setTimeout(() => {
      //   //     this.stateArr.push(JSON.stringify(this.canvas))
      //   //     this.stateIdx++
      //   //     if (this.stateArr.length > 1) {
      //   //       this.hasContentUnsaved = true
      //   //     }
      //   //   }, 300)
      //   // }else {
      //   //   // 当前正在执行撤销或重做操作，不记录重新绘制的画布
      //   //   this.isRedoing = false
      //   // }
      // })
      this.canvas.on("object:modified", this.updateCanvasState);
      this.canvas.on("object:added", this.updateCanvasState);
    },
    updateCanvasState: function updateCanvasState() {
      var _this4 = this;

      // console.log('object:modified',this.isRedoing)
      if (!this.isRedoing) {
        // 当前不是进行撤销或重做操作

        //undo操作时绘制的历史图形selectable属性会被重置，所以需要重新设置
        this.canvas.getObjects().forEach(function (item) {
          if (item.selectable) {
            item.set('selectable', false);
          }
        });

        // 在绘画时会频繁触发该回调，所以间隔0.1s记录当前状态
        if (this.recordTimer) {
          clearTimeout(this.recordTimer);
          this.recordTimer = null;
        }

        //点击画布不移动鼠标会计入历史记录 判断是否有移动 移动后在计入历史记录
        var width = Math.abs(this.mouseFrom.x - this.mouseTo.x);
        var height = Math.abs(this.mouseFrom.y - this.mouseTo.y);
        // console.log(width, height)
        if (width >= 1 || height >= 1 || this.selectTool == 'text') {
          this.recordTimer = setTimeout(function () {
            _this4.stateArr.push(JSON.stringify(_this4.canvas));
            _this4.stateIdx++;
            if (_this4.stateArr.length > 1) {
              _this4.hasContentUnsaved = true;
            }
          }, 100);
        }
      } else {
        // 当前正在执行撤销或重做操作，不记录重新绘制的画布
        this.isRedoing = false;
      }
    },

    // 绘图工具点击选择
    tapToolBtn: function tapToolBtn(tool) {
      this.isShowSubActions = true;
      if (this.selectTool == tool) return;
      // 保存当前选中的绘图工具
      this.selectTool = tool;

      // 选择任何工具前进行一些重置工作
      // 禁用画笔模式
      this.canvas.isDrawingMode = false;
      if (this.selectTool == "brush") {
        // 如果用户选择的是画笔工具，直接初始化，无需等待用户进行鼠标操作
        this.initBruch();
      }
    },
    setLineWidth: function setLineWidth(level) {
      this.lineWidth = level * 4;
      this.canvas.freeDrawingBrush.width = this.lineWidth;
      var fontSizeArr = [16, 24, 36];
      this.fontSize = fontSizeArr[level - 1];
    },
    setStokeColor: function setStokeColor(color) {
      this.strokeColor = color;
      this.canvas.freeDrawingBrush.color = this.strokeColor;
    },

    // 初始化画笔工具
    initBruch: function initBruch() {
      // 设置绘画模式画笔类型为 铅笔类型
      this.canvas.freeDrawingBrush = new external_fabric_["fabric"].PencilBrush(this.canvas);
      // 设置画布模式为绘画模式
      this.canvas.isDrawingMode = true;
      // 设置绘画模式 画笔颜色与画笔线条大小
      this.canvas.freeDrawingBrush.color = this.strokeColor;
      this.canvas.freeDrawingBrush.width = this.lineWidth;
    },

    // 初始化 绘制矩形
    initRect: function initRect() {
      // 计算矩形长宽
      var left = this.getTransformedPosX(this.mouseFrom.x);
      var top = this.getTransformedPosY(this.mouseFrom.y);
      if (this.mouseFrom.x > this.mouseTo.x) {
        left = Math.abs(this.mouseTo.x);
      }
      if (this.mouseFrom.y > this.mouseTo.y) {
        top = Math.abs(this.mouseTo.y);
      }
      var width = Math.abs(this.mouseFrom.x - this.mouseTo.x);
      var height = Math.abs(this.mouseFrom.y - this.mouseTo.y);
      // 创建矩形 对象
      var canvasObject = new external_fabric_["fabric"].Rect({
        left: left,
        top: top,
        width: width,
        height: height,
        stroke: this.strokeColor,
        fill: this.fillColor,
        strokeWidth: this.lineWidth
      });
      canvasObject.setCoords();
      // 绘制矩形
      this.startDrawingObject(canvasObject);
    },

    // 初始化 绘制直线
    initLine: function initLine() {
      // 根据保存的鼠标起始点坐标 创建直线对象
      var canvasObject = new external_fabric_["fabric"].Line([this.getTransformedPosX(this.mouseFrom.x), this.getTransformedPosY(this.mouseFrom.y), this.getTransformedPosX(this.mouseTo.x), this.getTransformedPosY(this.mouseTo.y)], {
        fill: this.fillColor,
        stroke: this.strokeColor,
        strokeWidth: this.lineWidth
      });
      // 绘制 图形对象
      this.startDrawingObject(canvasObject);
    },

    // 初始化绘制椭圆
    initEllipse: function initEllipse() {
      var left = this.getTransformedPosX(this.mouseFrom.x);
      var top = this.getTransformedPosY(this.mouseFrom.y);
      if (this.mouseFrom.x > this.mouseTo.x) {
        left = Math.abs(this.mouseTo.x);
      }
      if (this.mouseFrom.y > this.mouseTo.y) {
        top = Math.abs(this.mouseTo.y);
      }
      var width = Math.abs(this.mouseFrom.x - this.mouseTo.x);
      var height = Math.abs(this.mouseFrom.y - this.mouseTo.y);
      // console.log(width, height)
      // 创建 原型对象
      var canvasObject = new external_fabric_["fabric"].Ellipse({
        left: left,
        top: top,
        rx: width / 2,
        ry: height / 2,
        stroke: this.strokeColor,
        fill: this.fillColor,
        strokeWidth: this.lineWidth
      });
      // 绘制圆形对象
      this.startDrawingObject(canvasObject);
    },

    // 初始化文本工具
    initText: function initText() {
      if (!this.textObject) {
        // 当前不存在绘制中的文本对象

        // 创建文本对象
        this.textObject = new external_fabric_["fabric"].Textbox("", {
          left: this.getTransformedPosX(this.mouseFrom.x),
          top: this.getTransformedPosY(this.mouseFrom.y),
          fontSize: this.fontSize,
          fill: this.strokeColor,
          lineHeight: 1.1,
          hasControls: false,
          editable: true,
          width: 30
        });
        this.canvas.add(this.textObject);
        // 文本打开编辑模式
        this.textObject.enterEditing();
        // 文本编辑框获取焦点
        this.textObject.hiddenTextarea.focus();
      } else {
        // 将当前文本对象退出编辑模式
        this.textObject.exitEditing();
        if (this.textObject.text == "") {
          this.canvas.remove(this.textObject);
        }
        this.canvas.renderAll();
        this.textObject = null;
        return;
      }
    },
    initArrow: function initArrow() {
      var canvasObject = new external_fabric_["fabric"].Path(this.drawArrow(this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y, 30, 30), {
        fill: this.fillColor,
        stroke: this.strokeColor,
        strokeWidth: this.lineWidth
      });
      this.startDrawingObject(canvasObject);
    },

    // 绘制图形
    startDrawingObject: function startDrawingObject(canvasObject) {
      // 如果当前图形已绘制，清除上一次绘制的图形
      if (this.drawingObject) {
        this.canvas.remove(this.drawingObject);
      }
      // 将绘制对象添加到 canvas中
      this.canvas.add(canvasObject);
      // 保存当前绘制的图形
      this.drawingObject = canvasObject;
    },

    // undo redo按钮点击
    exeCommand: function exeCommand(type) {
      // this.isShowSubActions = false
      switch (type) {
        case 'undo':
          this.tapHistoryBtn(-1);
          break;
        case 'redo':
          this.tapHistoryBtn(1);
          break;
        case 'clear':
          this.tapHistoryClear();
          break;
        case 'save':
          this.save();
          break;
        case 'exit':
          this.exit();
          break;
        default:
          break;
      }
    },
    tapHistoryBtn: function tapHistoryBtn(flag) {
      this.isRedoing = true;

      var stateIdx = this.stateIdx + flag;
      // 判断是否已经到了第一步操作
      if (stateIdx < 0) return;
      // 判断是否已经到了最后一步操作
      if (stateIdx >= this.stateArr.length) return;
      if (this.stateArr[stateIdx]) {
        this.canvas.loadFromJSON(this.stateArr[stateIdx]);
        this.stateArr.splice(stateIdx + 1);
        this.stateIdx = stateIdx;

        // 撤销到初始状态不会触发obeject:modified事件，所以需要手动修改isRedoing状态,否则该次撤销后新建的画笔图形不会计入历史记录
        if (stateIdx == 0) {
          this.isRedoing = false;
        }
        // this.canvas.renderAll();
      }
    },

    // 清除画布
    tapHistoryClear: function tapHistoryClear() {
      this.canvas.clear();
      this.stateArr = [];
      this.stateIdx = 0;
      this.stateArr.push(JSON.stringify(this.canvas));
      // let content = "{\"version\":\"4.6.0\",\"objects\":[]}"
      // this.canvas.loadFromJSON(content)
      // this.stateArr.push(content)
      // this.stateIdx++
    },
    exit: function exit() {
      var _this5 = this;

      if (this.hasContentUnsaved) {
        this.$confirm('当前页面编辑内容还未保存，确定退出？', '提示').then(function () {
          _this5.mode = 'view';
          _this5.canvas = null;
          _this5.$refs.canvasWrapper.innerHTML = '';
        }).catch(function () {});
      } else {
        this.mode = 'view';
        this.canvas = null;
        this.$refs.canvasWrapper.innerHTML = '';
      }
    },
    save: function save() {
      //遍历所有对对象，获取最小坐标，最大坐标
      var dataURL = this.canvas.toDataURL({ format: 'png' });
      this.onSave(this.index, dataURL);
      this.hasContentUnsaved = false;
      // const link = document.createElement('a');
      // link.download = 'canvas.png';
      // link.href = dataURL;
      // document.body.appendChild(link);
      // link.click();
      // document.body.removeChild(link);
    },

    // 清空鼠标移动记录 （起点 与 终点）
    resetMove: function resetMove() {
      this.mouseFrom = {};
      this.mouseTo = {};
    },

    // 计算画布移动之后的x坐标点
    getTransformedPosX: function getTransformedPosX(x) {
      var zoom = Number(this.canvas.getZoom());
      return (x - this.canvas.viewportTransform[4]) / zoom;
    },
    getTransformedPosY: function getTransformedPosY(y) {
      var zoom = Number(this.canvas.getZoom());
      return (y - this.canvas.viewportTransform[5]) / zoom;
    },
    drawArrow: function drawArrow(fromX, fromY, toX, toY, theta, headlen) {
      theta = typeof theta != "undefined" ? theta : 30;
      headlen = typeof theta != "undefined" ? headlen : 10;
      // 计算各角度和对应的P2,P3坐标
      var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
          angle1 = (angle + theta) * Math.PI / 180,
          angle2 = (angle - theta) * Math.PI / 180,
          topX = headlen * Math.cos(angle1),
          topY = headlen * Math.sin(angle1),
          botX = headlen * Math.cos(angle2),
          botY = headlen * Math.sin(angle2);
      var arrowX = fromX - topX,
          arrowY = fromY - topY;
      var path = " M " + fromX + " " + fromY;
      path += " L " + toX + " " + toY;
      arrowX = toX + topX;
      arrowY = toY + topY;
      path += " M " + arrowX + " " + arrowY;
      path += " L " + toX + " " + toY;
      arrowX = toX + botX;
      arrowY = toY + botY;
      path += " L " + arrowX + " " + arrowY;
      return path;
    },
    getImageInfo: function getImageInfo(image, callback) {
      var _this6 = this;

      var img = new Image();
      img.src = image.background;
      img.onload = function (e) {
        // console.log(img.width, img.height)
        if (img.width > 940) {
          image.width = 940;
          image.height = img.height * 940 / img.width;
        } else {
          image.width = img.width;
          image.height = img.height;
        }
        _this6.$nextTick(callback);
        // 直接写入线上图片地址，会导致跨域问题，所以需要先下载图片，然后转成blob对象，再转成url
        // if (image.foreground) {
        //   fetch(image.foreground)
        //   .then(result => result.blob())
        //   .then(blob => {
        //       const url = URL.createObjectURL(blob);
        //       fabric.Image.fromURL(url, (Image) => {
        //         image.foregroundImageData = Image
        //         this.$nextTick(callback)
        //     })
        //   });
        // } else {
        //   this.$nextTick(callback)
        // }
      };
    },
    prev: function prev() {
      if (this.index === 0) return;
      if (this.mode == 'edit' && this.hasContentUnsaved) {
        this.save();
      }
      this.index--;
      this.renderImage();
    },
    next: function next() {
      if (this.index === this.imgList.length - 1) return;
      if (this.mode == 'edit' && this.hasContentUnsaved) {
        this.save();
      }
      this.index++;
      this.renderImage();
    },
    toEditMode: function toEditMode() {
      this.mode = 'edit';
      this.lineWidth = 4;
      this.fontSize = 16;
      this.renderImage();
    },
    hide: function hide() {
      this.onClose();
    }
  }
});
// CONCATENATED MODULE: ./packages/fabric-paint/src/paint.vue?vue&type=script&lang=js&
 /* harmony default export */ var src_paintvue_type_script_lang_js_ = (paintvue_type_script_lang_js_); 
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(1);

// CONCATENATED MODULE: ./packages/fabric-paint/src/paint.vue





/* normalize component */

var component = Object(componentNormalizer["a" /* default */])(
  src_paintvue_type_script_lang_js_,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* hot reload */
if (false) { var api; }
component.options.__file = "packages/fabric-paint/src/paint.vue"
/* harmony default export */ var paint = (component.exports);
// CONCATENATED MODULE: ./packages/fabric-paint/index.js



var fabric_paint_FabricPaint = function FabricPaint(options) {
  var prevOverflow = '';
  var ImageViewerConstructor = external_vue_default.a.extend(paint);
  var instance = new ImageViewerConstructor({
    el: document.createElement('div'),
    propsData: options
  });
  // for(let key in options) {
  //   instance[key] = options[key]
  // }
  instance.onClose = function () {
    document.body.style.overflow = prevOverflow;
    instance.isShow = false;
    setTimeout(function () {
      instance.$el.remove();
    }, 300);
  };
  instance.isShow = true;
  prevOverflow = document.body.style.overflow;
  document.body.style.overflow = 'hidden';
  document.body.appendChild(instance.$el);
};

/* harmony default export */ var fabric_paint = __webpack_exports__["default"] = (fabric_paint_FabricPaint);

/***/ })

/******/ });